<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/2/4
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
</head>
<body>

<div class="card-group">
    <div id="bg" class="card">
        <div class="card-body">

            <div style="float: left; " class="card">
                <a onclick="setFace(1)"  data-toggle="modal" data-target="#face"><img id="fface" style="width: 407px;" src="${APP_PATH}/${requestScope.furniture.fface}" class="img-thumbnail" alt="..."></a>
            </div>

            <div style="float: left; width: 710px; margin-left: 30px; margin-bottom: 25px;"  class="card">
                <div class="card-body">
                    <div class="alert alert-info alert-with-border" role="alert">
                        <h3 class="alert-heading">商品详情</h3>
                        在下列表单中完成商品信息修改。
                    </div>

                    <form id="furnitureInfo">
                        <input type="hidden" name="fid" value="${requestScope.furniture.fid}">
                        <input type="hidden" name="_method" value="PUT">
                        <div class="form-group row">
                            <label for="fname" class="col-sm-2 col-form-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="fname" name="fname" value="${requestScope.furniture.fname}" required/>
                                <div class="invalid-feedback">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="markettime" class="col-sm-2 col-form-label">上市时间</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="markettime"   readonly/>
                            </div>
                            <label for="offtime" class="col-sm-2 col-form-label">下架时间</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="offtime" readonly/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="fprice" class="col-sm-2 col-form-label">商品价格</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="fprice" name="fprice" value="${requestScope.furniture.fprice}" required/>
                                <div class="invalid-feedback"></div>
                            </div>
                            <label for="sales" class="col-sm-2 col-form-label">销售总量</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="sales" name="sales" value="${requestScope.furniture.sales}" readonly/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="ftag" class="col-sm-2 col-form-label">商品标签</label>
                            <div class="col-sm-10">
                                <input type="text" id="ftag" name="ftag" class="form-control tagsinput"  value="${requestScope.furniture.ftag}"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-12">
                                <button style="float: right;" onclick="updateInfo()"  type="button" class="btn btn-info " ><i class="ti-save"></i><span style="margin-left: 10px">保存</span></button>
                            </div>
                        </div>
                    </form>

                    <div style="margin-top: -55px;" class="form-group row">
                        <label for="condition" class="col-sm-2 col-form-label">当前状态</label>
                        <div  style="margin-top: 6px; margin-left: 15px;" class="custom-control custom-switch custom-checkbox-info">
                            <input type="checkbox" id="condition" class="custom-control-input">
                            <label class="custom-control-label" for="condition">下架/上市</label>
                    </div>

                </div>
                </div>
            </div>

        </div>
    </div>
</div>



<div class="modal fade bd-example-modal-sm" id="face" tabindex="-1" role="dialog" aria-labelledby="faceTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="faceTitle">修改商品展示图</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" onclick="updateFace()">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label class="col-form-label">请上传一张商品展示图:</label>
                <form action="${APP_PATH}/furniture/ffaceUpload" class="dropzone"></form>
            </div>
            <div class="modal-footer">
                <button onclick="updateFace()"  type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    function setCondition() {

        var batchFid = new Array();
        var val = 0;
        batchFid[0] = ${requestScope.furniture.fid};
        if($("#condition").prop("checked") == true){
            val = 1;
        }

            $.ajax({
                url : "${APP_PATH}/furniture/setCondition",
                method : "POST",
                data : {
                    batchFid : batchFid,
                    val : val
                },
                success : function (result) {
                    if(result.success){
                        getFurnitureInfo();
                    }else{
                        swal("修改失败！", {icon: "error"});
                    }
                }
            });

    }

    function updateFace() {
        var f;
        f = $("#face").find(".dz-image").html();
        if(f != undefined){

            $.ajax({
                url : "${APP_PATH}/furniture/updateFace",
                method : "POST",
                data : {
                    fid : ${requestScope.furniture.fid}
                },
                success: function (result) {
                    if(result.success){
                        swal("修改成功！", {icon: "success"}).then((value) => {
                            myDropzone.removeAllFiles();
                        getFurnitureFace();
                    });
                    }else{
                        swal("修改失败！", {icon: "error"});
                    }
                }
            });
        }
    }

    function updateInfo() {
        var data = $("#furnitureInfo").serialize();
        $.ajax({
            url : "${APP_PATH}/furniture/updateInfo/${requestScope.furniture.fid}",
            method : "POST",
            data : data,
            success : function (result) {
                if(result.success){
                    swal("修改成功！", {icon: "success"}).then((value) => {
                        getFurnitureInfo();
                });
                }else{
                    swal("修改失败！", {icon: "error"});
                }
            }
        });
    }

    function getFurnitureInfo() {
        $.ajax({
            url : "${APP_PATH}/furniture/getFurnitureDetail",
            method : "POST",
            data : {
                fid : ${requestScope.furniture.fid}
            },
            success : function (result) {
                if(result.success){
                    var furniture = result.data.furniture;
                    $("#fname").val(furniture.fname);
                    $("#fprice").val(furniture.fprice.toFixed(2));
                    $("#ftag").val(furniture.ftag);
                    $("input.tagsinput").tagsinput('items');
                    $("#markettime").val(furniture.markettime);
                    $("#offtime").val(furniture.offtime);
                    $("#sales").val(furniture.sales);
                    $("#furnitureInfo").find("input").each(function () {
                        $(this).removeClass("is-valid is-invalid");
                    });
                }
            }
        });
    }

    function getFurnitureFace() {
        $.ajax({
            url : "${APP_PATH}/furniture/getFurnitureDetail",
            method : "POST",
            data : {
                fid : ${requestScope.furniture.fid}
            },
            success : function (result) {
                if(result.success){
                    var furniture = result.data.furniture;
                    $("#fface").attr("src","${APP_PATH}/"+furniture.fface);
                }
            }
        });
    }
</script>